<template>
  <div class="container">
    <h1>运单查询</h1>
    <form @submit.prevent="search">
      <div class="form-group-inline">
        <div class="form-group">
          <label for="waybillNumber">运单编号：</label>
          <input id="waybillNumber" v-model="waybillNumber" type="text" required>
        </div>
        <div class="form-group">
          <label for="orderNumber">订单编号：</label>
          <input id="orderNumber" v-model="orderNumber" type="text" required>
        </div>
        <div class="form-group">
          <label for="dispatchStatus">调度状态：</label>
          <select id="dispatchStatus" v-model="dispatchStatus" required>
            <option value="">请选择</option>
            <option value="dispatched">已调度</option>
            <option value="in_transit">运输中</option>
            <option value="delivered">已送达</option>
          </select>
        </div>
      </div>
      <div class="form-group-inline">
        <div class="form-group">
          <label for="origin">起始地机构：</label>
          <select id="origin" v-model="origin" required>
            <option value="">请选择</option>
            <option value="branch1">分公司1</option>
            <option value="branch2">分公司2</option>
            <option value="branch3">分公司3</option>
          </select>
        </div>
        <div class="form-group">
          <label for="destination">目的地机构：</label>
          <select id="destination" v-model="destination" required>
            <option value="">请选择</option>
            <option value="branchA">分公司A</option>
            <option value="branchB">分公司B</option>
            <option value="branchC">分公司C</option>
          </select>
        </div>
        <div class="form-group">
          <label for="currentLocation">当前所在机构：</label>
          <select id="currentLocation" v-model="currentLocation" required>
            <option value="">请选择</option>
            <option value="branchX">分公司X</option>
            <option value="branchY">分公司Y</option>
            <option value="branchZ">分公司Z</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <button type="submit">搜索</button>
        <button type="button" @click="resetForm">重置</button>
      </div>
      <div class="status-container">
        <span class="status-item" @click="handleClick('全部')">全部: 6</span>
        <span class="status-item" @click="handleClick('新建')">新建: 0</span>
        <span class="status-item" @click="handleClick('已装车')">已装车: 0</span>
        <span class="status-item" @click="handleClick('运输中')">运输中: 0</span>
        <span class="status-item" @click="handleClick('到达终端网点')">到达终端网点: 5</span>
        <span class="status-item" @click="handleClick('拒收')">拒收: 1</span>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="运单编号" prop="id" />
          <el-table-column label="订单编号" prop="orderId" />
          <el-table-column label="运单状态" prop="status" />
          <el-table-column label="调度状态" prop="schedulingStatus" />
          <el-table-column label="起始营业部" prop="startAgencyName" />
          <el-table-column label="终点营业部" prop="endAgencyName" />
          <el-table-column label="当前所在机构" prop="currentAgencyName" />
          <el-table-column label="下一个机构" prop="nextAgencyName" />
          <el-table-column label="货品总体积（立方米）" prop="totalVolume" />
          <el-table-column label="货品总重量（千克）" prop="totalWeight" />
          <el-table-column label="创建时间" prop="created" />
          <el-table-column label="更新时间" prop="updated" />

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="viewDetails(scope.row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </form>
    <div v-if="searched">
      <h2>查询结果：</h2>
      <p>运单编号：{{ waybillNumber }}</p>
      <p>订单编号：{{ orderNumber }}</p>
      <p>调度状态：{{ dispatchStatus }}</p>
      <p>起始地机构：{{ origin }}</p>
      <p>目的地机构：{{ destination }}</p>
      <p>当前所在机构：{{ currentLocation }}</p>
    </div>
    <div class="pagination">
      <span>共 23 条</span>
      <span>
        每页条数：
        <el-select v-model="itemsPerPage" @change="handleItemsPerPageChange">
          <el-option
            v-for="option in itemsPerPageOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </span>
      <el-pagination
        :current-page="params.page"
        :page-size="params.pageSize"
        :total="params.pages"
        layout="prev, pager, next"
        @current-change="handlePageChange"
      />
      <span>前往</span>
      <el-input-number v-model="goToPageInput" :min="1" :max="totalPages" @change="goToPageButton" />
      <span>页</span>
    </div>
  </div>
</template>
<script>
import { getOrderList1 } from '@/api/order'

export default {
  data() {
    return {
      itemsPerPageOptions: [
        { label: '10条/页', value: 10 },
        { label: '20条/页', value: 20 },
        { label: '30条/页', value: 30 }
      ],
      totalItems: 23, // 总数据条数
      itemsPerPage: 10,
      goToPageInput: null,
      params: {
        currentAgencyId: null,
        endAgencyId: null,
        // id: null,
        orderId: null,
        page: 1,
        pageSize: 10,
        pages: 52,
        schedulingStatus: null,
        startAgencyId: null,
        status: null,
        order: null
      },
      // 其他数据...
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条数
      total: 6, // 总条数
      tableData: [
        {
          serialNumber: 1,
          id: '运单001',
          orderId: '订单001',
          status: '新建',
          schedulingStatus: '已装车',
          startAgencyName: '起始营业部',
          endAgencyName: '终点营业部',
          currentAgencyName: '当前所在机构',
          nextAgencyName: '下一个机构',
          totalVolume: '10',
          totalWeight: '100',
          created: '',
          updated: ''
        }
        // 添加更多数据行...
      ],
      waybillNumber: '',
      orderNumber: '',
      dispatchStatus: '',
      origin: '',
      destination: '',
      currentLocation: '',
      searched: false
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.pages / this.itemsPerPage)
    }
  },
  mounted() {
    this.getOrderList1() // 在组件加载时获取订单列表数据
  },
  methods: {
    async getOrderList1() {
      const { data } = await getOrderList1(this.params)
      // console.log(res.data.items)
      this.tableData = data.items
    },
    handlePageChange(page) {
      // this.currentPage = page
      this.params.page = page
      this.getOrderList1()
    },
    handleItemsPerPageChange() {
      this.page = 1
      this.params.pageSize = this.itemsPerPage
      this.getOrderList1()
    },
    goToPageButton() {
      if (this.goToPageInput >= 1 && this.goToPageInput <= this.totalPages) {
        this.currentPage = this.goToPageInput
      }
    },
    viewDetails(row) {
      // 执行查看详情操作，可以根据需要访问特定的行数据
      console.log('查看详情:', row)
      this.$router.push(`/nested/menu2/detail1/${row.id}`)
    },
    search() {
      // 这里执行查询操作，可以根据输入的运单编号、订单编号等信息进行相关查询
      // 您可以根据实际情况调用后端接口或处理查询逻辑
      // 在这个示例中，我们简单地将查询结果保存，并将 searched 置为 true
      // 请注意，在实际应用中，您可能需要使用异步操作（例如使用 axios 发送请求）来执行查询，并根据返回的数据进行相应的处理
      this.searched = true
    },
    resetForm() {
      this.waybillNumber = ''
      this.orderNumber = ''
      this.dispatchStatus = ''
      this.origin = ''
      this.destination = ''
      this.currentLocation = ''
      this.searched = false
    },
    handleClick(status) {
      // 处理点击事件的逻辑
      console.log(`点击了状态: ${status}`)
      // 在这里可以编写逻辑来处理点击事件
    }
    // search() {
    //   // 查询操作
    //   // 模拟赋值查询结果
    //   this.searched = true;
    //   this.waybillNumber = 'SL1000000001212';
    //   this.orderNumber = '1608062099177144321';
    //   this.dispatchStatus = '已调度';
    //   this.origin = '皇姑区营业部';
    //   this.destination = '武昌营业部';
    //   this.currentLocation = '武昌营业部';
    // },
  }
}
</script>
<style>
.container {
  /* max-width: 800px; */
  margin: 0 auto;
  padding: 20px;
}

h1, h2 {
  color: #333;
}

.form-group {
  margin-bottom: 10px;
}

.form-group-inline {
  display: flex;
  align-items: center;
}

.form-group-inline > .form-group {
  margin-right: 20px;  /* 调整列间距 */
}

label {
  display: inline-block;
  width: 150px;
}

input[type="text"],
select {
  width: 200px;
  padding: 5px;
}

button {
  padding: 5px 10px;
  margin-right: 10px;
}

button[type="submit"] {
  background-color: #4caf50;
  color: white;
  border: none;
}

button[type="button"] {
  background-color: #f44336;
  color: white;
  border: none;
}
.status-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .status-item {
    padding: 5px 10px;
    background-color: #eee;
    border-radius: 5px;
    cursor: pointer; /* 添加鼠标样式为手型 */
  }
  .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

</style>
